<template>
  <cj-popup v-model="showPassword" @closed="closePassword" :closeable="true" round>
    <div class="c-ww480 c-pb40 c-fs24 c-fc-sblack c-ph30 c-textAlign-l">
      <div class="c-pt60 c-pb40 c-fs28 c-fw-b c-textAlign-c">{{text}}</div>
      <div v-show="noticeText" class="c-fs22 notice-color c-textAlign-l">{{noticeText}}</div>
      <input :placeholder="placeholderText" @focus='inputFocus' @blur='inputBlur' id="inputPwd" type="password" v-model="inputPwd" class="input-pwd c-w100 c-hh60 c-fs26" />
      <div class="c-hh50 c-lh50 c-fs20 c-fc-gray c-textAlign-l">{{pwTip ? '提示：' + pwTip : ''}}</div>
      <div @click="submitPassword" class="c-w100 c-hh60 c-flex-row c-flex-center c-br30 c-fs24 c-fc-white theme-bg">确定</div>
    </div>
    <div class="close-icon">
      <i @click="closePassword" class="iconfont c-fc-white c-fs40">&#xe84e;</i>
    </div>
  </cj-popup>
</template>

<script>
let inputScrollTop = 0;
export default {
  name: "ComfirmCom",
  components: {
  },
  props: {
    showPassword: {
      //绑定的输入框的值
      type: Boolean,
      default: false
    },
    text: {
      type: String,
      default: "输入密码"
    },
    placeholderText: {
      type: String,
      default: "请输入密码"
    },
    noticeText: {
      type: String,
      default: ""
    },
    pwTip: {
      type: String,
      default: ""
    }
  },
  data() {
    return {
      inputPwd: "",
      theme: localStorage.getItem("colorName")
    };
  },
  mounted() {

  },
  watch: {
    showPassword: function (val) {
      if (val) {
        this.inputPwd = '';
        if (!navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)) {
          setTimeout(() => {
            document.getElementById("inputPwd").focus();
          }, 100);
        }
      }
    },
    inputPwd: function (val) {
      this.$emit('update:noticeText', '')
      this.$emit('changePsw');
    }
  },
  methods: {
    //IOS微信6.7以上版本会导致输入法收起的时候，键盘没收起，需要手动滚下屏幕
    inputFocus() {
      if (navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)) {
        inputScrollTop = document.documentElement.scrollTop || document.body.scrollTop;
      }
    },
    inputBlur() {
      if (navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)) {
        setTimeout(() => {
          document.body.scrollTop = inputScrollTop - 1 || 0;
        });
      }
    },
    closePassword() {
      this.$emit('update:showPassword', false)
      this.$emit('closePassword');
    },
    submitPassword() {
      this.$emit('submitPassword', this.inputPwd);
    }
  }
};
</script>


<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.notice-color {
  color: #ff300c;
}
.dialog-demo .weui-dialog {
  overflow: visible;
}
.close-icon {
  position: absolute;
  left: 50%;
  bottom: -2rem;
  transform: translateX(-50%);
}
.input-pwd {
  appearance: none;
  -webkit-appearance: none;
  background: none;
  border: none;
  border-bottom: 1px solid #e6e6e6;
}
</style>
